<script setup>
import PageContainer from '@/components/pageContainer.vue'
import { onMounted, ref, reactive } from 'vue'

import {
  addEmployeeService,
  editEmployeeService,
  getEmployeeListService
} from '@/api/employee/employee'
import { ElMessage } from 'element-plus'

const page = ref(1)
const pageSize = ref(9)

const employeeList = ref([])
const total = ref(-1)
const queryParams = ref({
  page: 1,
  pageSize: 8,
  name: null
})
const getEmployeeList = async () => {
  const res = await getEmployeeListService(queryParams.value)
  employeeList.value = res.data.data.records
  total.value = res.data.data.total
}
const handleQuery = () => {
  queryParams.value.page = 1
  getEmployeeList()
}
const form = ref({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const dialogVisible = ref(false)
const formModel = ref({})
const formRef = ref(null)
const title = ref('')
const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'change' },
    { min: 3, max: 10, message: '账号必须在3-10位', trigger: 'change' }
  ],
  name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'change' },
    {
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      message: '手机号格式有误'
    }
  ],
  idNumber: [
    { required: true, message: '请输入身份证号', trigger: 'change' },
    {
      pattern:
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      message: '身份证号格式有误'
    }
  ]
}
const handleBeforeClose = () => {
  dialogVisible.value = false
  formModel.value = {}
  getEmployeeList()
}
const addEmployeeHandle = () => {
  title.value = '添加员工'
  if (formRef.value) {
    formRef.value.clearValidate()
  }
  dialogVisible.value = true
}
const editEmployee = (row) => {
  formModel.value = row
  console.log(formModel.value)
  title.value = '编辑员工'
  dialogVisible.value = true
}
const handleSubmit = async () => {
  await formRef.value.validate()
  if (!formModel.value.sex) {
    let sexNumber = parseInt(formModel.value.idNumber.charAt(16), 10)
    formModel.value.sex = sexNumber % 2 === 0 ? '0' : '1'
    const res = await addEmployeeService(formModel.value)
    if (res.data.code === 1) {
      ElMessage.success('添加成功')
    } else {
      ElMessage.error(res.data.msg)
    }
  } else {
    const res = await editEmployeeService(formModel.value)
    if (res.data.code === 1) {
      ElMessage.success('修改成功')
    } else {
      ElMessage.error(res.data.msg)
    }
  }
  handleBeforeClose()
}
const changeEmployeeStatus = async (scope) => {
  const res = await editEmployeeService(scope.row)
  if (res.data.code === 1) {
    ElMessage.success('修改成功')
  } else {
    ElMessage.error(res.data.msg)
  }
}

const resetForm = () => {
  // queryParams.value.page = 1

  queryParams.value.name = null
  handleQuery()
}

onMounted(() => {
  getEmployeeList()
})
</script>

<template>
  <el-dialog
    style="border-radius: 25px"
    v-model="dialogVisible"
    width="35%"
    :title="title"
    :modal="true"
    :before-close="handleBeforeClose"
  >
    <el-form
      :label-position="'right'"
      :model="formModel"
      :rules="rules"
      ref="formRef"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="账号" prop="username">
            <el-input v-model="formModel.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工姓名" prop="name">
            <el-input v-model="formModel.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="formModel.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="formModel.idNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <div style="position: absolute; right: 0; margin-top: 30px">
          <el-button
            color="#8fbc8f"
            type="primary"
            plain
            round
            @click="handleSubmit"
            >确定
          </el-button>
          <el-button type="info" plain round @click="handleBeforeClose"
            >取消
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
  <div class="floating-box">
    <div>
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="68px"
        class="no-wrap"
        @keydown.enter.prevent
      >
        <el-form-item prop="name">
          <el-input
            class="input-class"
            prefix-icon="Search"
            v-model="queryParams.name"
            placeholder="请输入员工姓名"
            @keyup.enter="handleQuery()"
          />
        </el-form-item>
        <el-form-item>
          <div class="no-wrap">
            <el-button
              icon="Search"
              plain
              round
              color="#95d475"
              @click="getEmployeeList()"
              >搜索</el-button
            >
            <el-button
              icon="Refresh"
              plain
              round
              color="#95d475"
              @click="resetForm()"
              >重置</el-button
            >
            <el-button
              icon="CirclePlus"
              plain
              round
              color="#95d475"
              @click="addEmployeeHandle()"
              >添加员工
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <el-table :data="employeeList" width="100%" :stripe="true" size="large">
      <el-table-column
        prop="name"
        label="员工姓名"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="username"
        label="账号"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-switch
            @change="changeEmployeeStatus(scope)"
            v-model="scope.row.status"
            inline-prompt
            active-text="正常"
            :active-value="1"
            style="--el-switch-on-color: #8fbc8f"
            :inactive-value="0"
            inactive-text="禁用"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template #default="{ row }">
          <el-button
            icon="Edit"
            type="primary"
            color="#8fbc8f"
            plain
            round
            @click="editEmployee(row)"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        v-show="total > 0"
        :total="total"
        @size-change="getEmployeeList"
        @current-change="getEmployeeList"
      />
    </div>
  </div>
</template>

<style scoped>
/deep/ .el-input__wrapper {
  border-radius: 50px;
  /*background-color: red;*/
}
</style>
